<template>
    <div class="docs-page">
        <PageHeader 
            title="技术文档" 
            subtitle="易凡科技产品和服务的技术文档资料"
            :breadcrumbItems="[{ text: '首页', path: '/' }]"
            currentText="技术文档"
        />
        
        <div class="page-container">
            <!-- 分类筛选 -->
            <div class="category-filter">
                <el-radio-group v-model="selectedCategory" @change="handleCategoryChange">
                    <el-radio-button :label="null">全部文档</el-radio-button>
                    <el-radio-button v-for="category in categories" :key="category.id" :label="category.id">
                        {{ category.name }}
                    </el-radio-button>
                </el-radio-group>
            </div>
            
            <!-- 文档列表 -->
            <div class="docs-list" v-loading="loading">
                <div class="row">
                    <div class="col" v-for="item in data" :key="item._id">
                        <el-card class="doc-card" shadow="hover" @click="viewDetail(item._id)">
                            <div class="doc-cover">
                                <img :src="item.cover" :alt="item.title">
                                <div class="doc-category">{{ getCategoryName(item.category) }}</div>
                            </div>
                            <div class="doc-info">
                                <h3 class="doc-title">{{ item.title }}</h3>
                                <p class="doc-description">{{ getSummary(item.content) }}</p>
                                <div class="doc-footer">
                                    <span class="doc-date">{{ formatDate(item.editTime) }}</span>
                                    <el-button type="primary" size="small" @click.stop="viewDetail(item._id)">查看详情</el-button>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </div>
                
                <!-- 空状态 -->
                <el-empty v-if="!loading && data.length === 0" description="暂无相关文档" />
            </div>
            
            <!-- 分页 -->
            <Pagination
                v-if="total > 0"
                :total="total"
                :current-page="currentPage"
                :page-size="pageSize"
                @current-change="changePage"
                @size-change="changePageSize"
            />
        </div>
    </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { getDocsList, getDocsCategories } from '@/api/docs';
import { usePagination } from '@/utils/useApi';
import { getSummary, formatDate } from '@/utils/helper';
import PageHeader from '@/components/PageHeader.vue';
import Pagination from '@/components/Pagination.vue';

export default {
    name: 'DocsView',
    components: {
        PageHeader,
        Pagination
    },
    setup() {
        const router = useRouter();
        const selectedCategory = ref(null);
        const categories = ref([]);
        const pageSize = ref(10);
        
        // 使用usePagination钩子获取文档列表
        const { 
            data, 
            error, 
            loading, 
            currentPage, 
            total, 
            loadData, 
            changePage, 
            changePageSize, 
            refresh 
        } = usePagination(getDocsList, { pageSize: pageSize.value });
        
        // 获取文档分类
        const fetchCategories = async () => {
            try {
                const res = await getDocsCategories();
                if (res.data && res.data.ActionType === 'ok') {
                    categories.value = res.data.data;
                }
            } catch (error) {
                console.error('获取文档分类失败:', error);
            }
        };
        
        // 获取分类名称
        const getCategoryName = (categoryId) => {
            if (!categoryId) return '未分类';
            const category = categories.value.find(c => c.id === categoryId);
            return category ? category.name : '未分类';
        };
        
        // 查看详情
        const viewDetail = (id) => {
            router.push(`/docs/${id}`);
        };
        
        // 处理分类变化
        const handleCategoryChange = () => {
            loadData({ 
                page: 1, 
                category: selectedCategory.value 
            });
        };
        
        // 监听分类变化
        watch(selectedCategory, () => {
            handleCategoryChange();
        });
        
        onMounted(() => {
            fetchCategories();
            loadData();
        });
        
        return {
            data,
            error,
            loading,
            currentPage,
            total,
            selectedCategory,
            categories,
            pageSize,
            getCategoryName,
            getSummary,
            formatDate,
            viewDetail,
            changePage,
            changePageSize,
            handleCategoryChange
        };
    }
}
</script>

<style lang="scss" scoped>
.docs-page {
    .category-filter {
        margin-bottom: 30px;
    }
    
    .docs-list {
        margin-bottom: 30px;
        min-height: 300px;
        
        .row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            
            @media (max-width: 1200px) {
                grid-template-columns: repeat(2, 1fr);
            }
            
            @media (max-width: 768px) {
                grid-template-columns: 1fr;
            }
            
            .col {
                margin-bottom: 30px;
            }
        }
        
        .doc-card {
            height: 100%;
            cursor: pointer;
            transition: transform 0.3s;
            
            &:hover {
                transform: translateY(-5px);
            }
            
            .doc-cover {
                position: relative;
                height: 200px;
                overflow: hidden;
                
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                
                .doc-category {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    background-color: rgba(0, 0, 0, 0.6);
                    color: #fff;
                    padding: 2px 8px;
                    border-radius: 4px;
                    font-size: 12px;
                }
            }
            
            .doc-info {
                padding: 15px;
                
                .doc-title {
                    margin-top: 0;
                    margin-bottom: 10px;
                    font-size: 18px;
                    font-weight: 600;
                    color: #333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                
                .doc-description {
                    color: #666;
                    font-size: 14px;
                    line-height: 1.5;
                    height: 60px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                }
                
                .doc-footer {
                    margin-top: 15px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    
                    .doc-date {
                        color: #999;
                        font-size: 12px;
                    }
                }
            }
        }
    }
}
</style> 